<template>
  <div class="mid-block2">
    <div class="mid-title">
      <div class="display-flex">
        <div class="box1">
          <span class="txt">{{ obj.equip_code }}号焊机</span>
          <span v-if="obj.hj_stats==='1'">
            <span class="state state-sucess" />
            <i>正常</i>
          </span>
          <span v-if="obj.hj_stats==='0'">
            <span class="state state-offline" />
            <i>离线</i>
          </span>
        </div>
        <div class="box1 text-right">
          <span class="color-green2 view" @click="dialogVisible = true"><i class="el-icon-document" />&nbsp;查看详情</span>
          <span class="item-drow">
            <span class="el-dropdown-link" style="cursor: pointer" @click="isShow=!isShow">
              显示指标<i class="el-icon-arrow-down el-icon&#45;&#45;right" />
            </span>
            <div v-show="isShow">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="current">电流</el-checkbox>
                <el-checkbox label="voltage">电压</el-checkbox>
                <el-checkbox label="ss_speed">送丝速度</el-checkbox>
                <el-checkbox label="haz_temp">热影响区温度</el-checkbox>
                <el-checkbox label="air_flux">气体流量</el-checkbox>
                <el-checkbox label="ar_purity">氩气纯度</el-checkbox>
              </el-checkbox-group>
            </div>

          </span>
        </div>
      </div>
    </div>
    <div class="mid-total">
      <span v-if="checkList.indexOf('current') !== -1" class="t"><i class="num color1">{{ obj.current }}</i>电流</span>
      <span v-if="checkList.indexOf('voltage') !== -1" class="t"><i class="num color3">{{ obj.voltage }}</i>电压</span>
      <span v-if="checkList.indexOf('ss_speed') !== -1" class="t"><i class="num color-yellow1">{{ obj.ss_speed }}</i>送丝速度(mm/秒）</span>
      <span v-if="checkList.indexOf('haz_temp') !== -1" class="t"><i class="num color-red1">{{ obj.haz_temp }}</i>热影响区温度(℃）</span>
      <span v-if="checkList.indexOf('air_flux') !== -1" class="t"><i class="num color-green1">{{ obj.air_flux }}</i>气体流量</span>
      <span v-if="checkList.indexOf('ar_purity') !== -1" class="t"><i class="num color-red2">{{ obj.ar_purity }}</i>氩气纯度</span>
    </div>
    <template v-for="(item,index) in dataList">
      <div v-show="index===active" class="echart-body" style="width: 100%; height: 240px;margin-top: 20px">
        <hj-line-big :gete-way-code="item.geteWay_code" :obj="item" :types="checkList" />
      </div>
    </template>
    <!-- Swiper -->
    <div class="thumb-example">
      <!--- demo -->
      <swiper ref="swiper" class="swiper" :options="swiperOption">
        <swiper-slide v-for="(item,index) in dataList" :key="index" style="width: 170px; height: 98px">
          <div class="card-info" :class="{active: active===index}" @click="chooseHandle(index)">
            <div class="title text-ellipsis">
              <span v-if="item.hj_stats==='0'" class="state state-offline" />
              <span v-if="item.hj_stats==='1'" class="state state-sucess" />
              <span class="tit text-ellipsis" style="width: 110px;display: inline-block;vertical-align: middle">{{ item.equip_code }}号焊机</span>
              <div style="height: 50px;width: 140px;">
                <hj-line :gete-way-code="item.geteWay_code" :obj="item" />
              </div>
            </div>
          </div>
        </swiper-slide>
        <!--        <swiper-slide>-->
        <!--          <div class="card-info">-->
        <!--            <div class="title text-ellipsis">-->
        <!--              <span class="state state-error" />-->
        <!--              <span class="tit">004号焊机</span>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </swiper-slide>-->
        <!--        <swiper-slide>-->
        <!--          <div class="card-info">-->
        <!--            <div class="title text-ellipsis">-->
        <!--              <span class="state state-sucess" />-->
        <!--              <span class="tit">004号焊机</span>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </swiper-slide>-->
        <!--        <swiper-slide>-->
        <!--          <div class="card-info">-->
        <!--            <div class="title text-ellipsis">-->
        <!--              <span class="state state-waring" />-->
        <!--              <span class="tit">004号焊机</span>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </swiper-slide>-->
        <div slot="button-prev" class="swiper-button-prev">
          <i class="el-icon-caret-left" style="font-size: 40px" />
        </div>
        <div slot="button-next" class="swiper-button-next">
          <i class="el-icon-caret-right" style="font-size: 40px" />
        </div>
        <!--       <div slot="button-prev" class="swiper-button-prev" />-->
        <!--        <div slot="button-next" class="swiper-button-next" />-->
      </swiper>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="530px"
      class="wise-modal"
    >
      <div class="wise-wrap">
        <div class="modal-wpline">
          <div class="modal-body">
            <div class="wise-body scroplist wise-detail">
              <span class="txt">001号焊机</span>
              <div class="detail-info">
                <el-form label-width="100px" class="wise-form" label-suffix=":" style="padding-top:60px">
                  <el-form-item v-if="obj.hj_stats==='1'" label="状态">
                    <span class="state state-sucess" />正常
                  </el-form-item>
                  <el-form-item v-if="obj.hj_stats==='0'" label="状态">
                    <span class="state state-offline" />离线
                  </el-form-item>
                  <el-form-item label="项目编号">
                    {{ obj.project_id }}
                  </el-form-item>
                  <el-form-item label="工艺规程">
                    {{ obj.process }}
                  </el-form-item>
                  <el-form-item label="焊接工艺">
                    {{ obj.hj_process }}
                  </el-form-item>
                  <el-form-item label="焊口编号">
                    {{ obj.weld_cod }}
                  </el-form-item>
                  <el-form-item label="焊接位置">
                    {{ obj.position }}
                  </el-form-item>
                  <el-form-item label="机组编号">
                    {{ obj.team_code }}
                  </el-form-item>
                  <el-form-item label="设备编号">
                    {{ obj.equip_code }}
                  </el-form-item>
                  <el-form-item label="人员编号">
                    {{ obj.person_code }}
                  </el-form-item>
                  <el-form-item label="所属平台">
                    {{ obj.refrom_unit }}
                  </el-form-item>
                  <el-form-item label="焊层">
                    {{ obj.layer }}
                  </el-form-item>
                  <div class="text-center btn-show">
                    <el-button type="primary" style="display: block; margin: 0 auto" @click="dialogVisible = false">关闭</el-button>
                  </div>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import { postHandle } from '@/api'
import HjLine from './hjLine'
import HjLineBig from './hjLineBig'
export default {
  name: 'MidBlock2',
  components: { HjLineBig, HjLine, Swiper, SwiperSlide },
  data() {
    return {
      n: 0,
      isShow: false,
      active: 0,
      deviceList: [],
      dialogVisible: false,
      checkList: ['current', 'voltage', 'ss_speed', 'haz_temp', 'air_flux', 'ar_purity'],
      swiperOption: {
        slidesPerView: 5,
        spaceBetween: 30,
        direction: 'horizontal',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          resize: () => {
            this.$refs.swiper.$swiper.changeDirection(
              window.innerWidth <= 960
                ? 'vertical'
                : 'horizontal'
            )
          }
        }
      },
      dataList: [],
      obj: {
        'equip_code': '01',
        'hj_stats': '0'

      }
    }
  },
  watch: {
    deviceList(val) {
      clearInterval(this.n)
      this.getData()
      this.n = setInterval(() => {
        this.getData()
      }, 3000)
    }
  },
  mounted() {
    this.getDevice()
  },
  beforeDestroy() {
    clearInterval(this.n)
  },
  methods: {
    chooseHandle(index) {
      this.active = index
      this.obj = this.dataList[index]
    },
    getDevice() {
      postHandle('/api/v1/welder-sbtx-second/gateway-comb/list', {
        d: {
          filters: [
            {
              field: 'projectId',
              operator: 'EQUALS',
              value: this.$route.query.id
            }
          ]
        }
      }).then(res => {
        this.deviceList = res.result
      })
    },
    getData() {
      postHandle('/ekjdTest/api/HJDatas', {
        'geteWay_code': this.deviceList.map(item => item.gatewayCode)
      }).then(res => {
        let data = res.result
        this.dataList = []
        let obj = {
          wind: 0,
          temp: 0,
          'flammable_gas': 0,
          oxygen: 0,
          humidity: 0
        }
        data.forEach(item => {
          if (item.geteWay_code === '0300000004') {
            obj.wind = item.wind
            obj.temp = item.temp
            obj.humidity = item.humidity
          } else {
            if (item.geteWay_code === '0300000002') {
              obj['flammable_gas'] = item['flammable_gas']
              obj['oxygen'] = item['oxygen']
            }
            this.dataList.push(item)
          }
        })
        // this.dataList = data
        // let o = data.find(item => item['geteWay_code'] === '0300000002')
        // this.$emit('on-data', o)
        this.$emit('on-data', obj)
        this.obj = this.dataList[this.active]
      })
    }
  }
}
</script>

